<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>系统登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<link href="css/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="js/validator/jquery.validator.css"	rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"	type="text/javascript"></script>
<script src="js/validator/jquery.validator.js"	type="text/javascript"></script>
<script src="js/validator/local/zh_CN.js"	type="text/javascript"></script>
<script src="js/jquery.cookie.js"	type="text/javascript"></script>	
	
<style>
 {
	margin: 0;
	padding: 0;
}

body {
	background: #444
		url(http://sandbox.runjs.cn/uploads/rs/418/nkls38xx/carbon_fibre_big.png);
	font-family: "宋体";
}

.loginBox {
	width: 600px;
	height: 350px;
	padding: 0 20px;
	border: 1px solid #fff;
	color: #000;
	margin-top: 30px;
	border-radius: 8px;
	background: white;
	box-shadow: 0 0 15px #222;
	background: -moz-linear-gradient(top, #fff, #efefef 8%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6),
		to(#f4f4f4));
	font: 11px/1.5em 'Microsoft YaHei';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -310px;
	margin-top: -205px;
}

.loginBox h2 {
	height: 45px;
	font-size: 20px;
	font-weight: normal;
}

.loginBox .left {
	border-right: 1px solid #ccc;
	height: 100%;
	padding-right: 20px;
}

.regBtn {
	margin-top: 21px;
}

</style>

</head>
<body>
	<div class="container">
		<form action="j_spring_security_check" method="post" id="loginForm">
			<input type="hidden" name="SPRING_REQUEST_KEY" value="0"><!-- 指定字段名并将该值设置为0,为类型一登录 -->
			<section class="loginBox row">
			<div class="row-fluid">
				<section class="span5">
					<h2>某某APP后台管理</h2>
					<p id="errorMessage" style="color: red;"></p>
					<p>
						<input type="text" id="adminName" name="j_username" placeholder="用户名"
							data-rule="filter;required;username;length[5~20]" />
					</p>
					<p>
						<input type="password" id="adminPassword" name="j_password" placeholder="密码"
							data-rule="filter;required;" />
					</p>
				   <p>
						    <label class="checkbox inline" for="remember">记住密码 </label><input type="checkbox"  id="remember" >
  					</p>
						<p> 
							<input type="button" value=" 登录 " onclick="saveUserInfo()"  class="btn btn-primary">
						</p> 
				</section> 
				</div>
			</section>
			<!-- /loginBox -->
		</form>
	</div>
	<Script>
	
	//获取浏览器参数
	function getUrlParam(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		var r = window.location.search.substr(1).match(reg);  //匹配目标参数
		if (r!=null) return unescape(r[2]); return null; //返回参数值
	}
	//保存用户信息
	function saveUserInfo() {
	    if ($("input[type='checkbox']").is(":checked")) {
	        var userName = $("#adminName").val();
	        var passWord = $("#adminPassword").val();	
	        $.cookie("remember", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
	        $.cookie("userName", userName, { expires: 7 }); // 存储一个带7天期限的 cookie
	        $.cookie("passWord", passWord, { expires: 7 }); // 存储一个带7天期限的 cookie
	    }
	    else {
	        $.cookie("remember", "false", { expires: -1 });
	        $.cookie("userName", '', { expires: -1 });
	        $.cookie("passWord", '', { expires: -1 });
	    }
	    $("#loginForm").submit();
	    
	}
		$(function() {
			 var error=getUrlParam("error");
			 console.log(error);
			if(typeof(error)!="undefined" && error!=null){
				$("#errorMessage").html("用户名或密码错误");
			}
		    if ($.cookie("remember") == "true") {
		        $("#remember").attr("checked", true);
		        $("#adminName").val($.cookie("userName"));
		        $("#adminPassword").val($.cookie("passWord"));
		    }
		});
	</Script>
	<!-- /container -->
</body>
</html>